<template>
  <div>
    <table class="tab">
      <tr>
        <td>学号</td>
        <td>姓名</td>
        <td>性别</td>
        <td>专业</td>
      </tr>
      <tr v-for="s in students" :key="s.sid">
        <td>{{ s.sid }}</td>
        <td>{{ s.sname }}</td>
        <td v-if="s.gender==1">男</td>
        <td v-else>女</td>
        <td>{{s.major}}</td>
      </tr>
    </table>
    <div>
      <div>姓名：<input type="text" v-model="student.sname"></div>
      <div>性别：<input type="text" v-model="student.gender"></div>
      <div>年龄：<input type="text" v-model="student.age"></div>
      <div>专业：<input type="text" v-model="student.major"></div>
      <div><button @click="add">添加</button></div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data(){
    return {
      students:[],
      student:{}  //获取表单中用户填写的学生信息
    }
  },
  methods:{
    all(){
      let _this = this
      axios.get('http://localhost:8888/student/all')
      .then(function(rs){
          console.log(rs.data);
          _this.students = rs.data
      })
    },

    add(){
      let _this = this
      axios.post('http://localhost:8888/student/add',_this.student)
      .then(function(rs){
        alert(rs.data.message)
        _this.all() //重新绑定表格，显示最新数据
      })
    }

  },
  created(){
    this.all()
  }
}
</script>

<style>
  .tab
  {
    width:60%;
    border:solid 1px blue;
    border-collapse: collapse;
  }
  .tab td
  {
    border:solid 1px blue;
    text-align: center;
  }
</style>
